<template>
  <div class="margin_30">
    <el-card shadow="never" :body-style="{padding:'20px'}" style="margin-bottom:30px">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="mini" :inline="true">
        <el-row :gutter="20">
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-input
                v-model="form.orderSn"
                placeholder="订单编号"
              />
            </el-form-item>
          </el-col>
          <!-- orderType (integer, optional): 订单类型：0->正常订单；1->秒杀订单 , -->
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-select v-model="form.orderType" placeholder="订单类型" clearable filterable>
                <el-option
                  label="正常订单"
                  value="0"
                />
                <el-option
                  label="秒杀订单"
                  value="1"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- payType (integer, optional): 支付方式：0->未支付；1->支付宝；2->微信 , -->
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-select v-model="form.payType" placeholder="支付方式" clearable filterable>
                <el-option
                  label="未支付"
                  value="0"
                />
                <el-option
                  label="支付宝"
                  value="1"
                />
                <el-option
                  label="微信"
                  value="2"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-select v-model="form.status" placeholder="订单状态" clearable filterable>
                <el-option
                  label="待付款"
                  value="0"
                />
                <el-option
                  label="待发货"
                  value="1"
                />
                <el-option
                  label="已发货"
                  value="2"
                />
                <el-option
                  label="已完成"
                  value="3"
                />
                <el-option
                  label="退货"
                  value="4"
                />
                <el-option
                  label="无效订单"
                  value="5"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-button @click="resetOrder">重置</el-button>
              <el-button type="primary" @click="searchOrders">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <el-table :data="list" border stripe height="550">
        <el-table-column
          label="#"
          width="50"
          type="index"
          fixed="left"
        />
        <el-table-column
          prop="orderSn"
          label="订单编号"
          align="center"
          width="200"
        />
        <el-table-column
          prop="payType"
          label="支付方式"
          align="center"
          width="250"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.payType === 1" type="" effect="dark">
              <span class="iconfont icon-zhifubao" />
            </el-tag>
            <el-tag v-else-if="scope.row.payType === 2" type="success" effect="dark">
              <span class="iconfont icon-weixin" />
            </el-tag>
            <el-tag v-else type="info" effect="dark">
              未支付
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态"
          width="150"
          align="center"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" effect="dark">
              待付款
            </el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning" effect="dark">
              待发货
            </el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="">
              已发货
            </el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="" effect="dark">
              已完成
            </el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="info" effect="dark">
              退货
            </el-tag>
            <el-tag v-else-if="scope.row.status === 5" type="info">
              无效订单
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="添加时间"
          width="180"
          align="center"
        />
        <el-table-column
          prop="memberUsername"
          label="用户账号"
          align="center"
          width="150"
        />
        <el-table-column
          prop="orderType"
          label="订单类型"
          align="center"
          width="150"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.orderType === 1" type="danger">
              秒杀订单
            </el-tag>
            <el-tag v-else type="success">
              正常订单
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          align="center"
          width="150"
        />
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-view" size="small" @click="goInfo(scope.row.id)">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="paginationParams.start"
        :page-sizes="paginationParams.pageSize"
        :page-size="paginationParams.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { findOrdersByPage } from '@/api/order/list'
import '@/styles/iconfont.css'
import mix from '@/mixins'
export default {
  mixins: [mix],

  data() {
    return {
      form: {
        'deliverySn': '',
        'id': '',
        'memberUsername': '',
        'orderSn': '',
        'orderType': '',
        'payType': '',
        'sourceType': '',
        'status': ''
      },
      list: []
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    init() {
      findOrdersByPage(this.paginationParams.start, this.paginationParams.limit, this.form)
        .then(res => {
          console.log(res)
          this.list = res.data.rows
          this.paginationParams.total = res.data.total
        })
    },
    // 每页多少条改变时触发（main.js中切换页码中文）
    handleSizeChange(e) {
      this.paginationParams.limit = e
      this.init()
    },
    // 当前页码发生改变触发
    handleCurrentChange(e) {
      this.paginationParams.start = e
      this.init()
    },
    searchOrders() {
      this.init()
    },
    resetOrder() {
      this.form = {}
      this.init()
    },
    goInfo(id) {
      this.$router.push(`/order/list/info/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
